<template>
  <div class="news-list">
    <template v-if="list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="con">
          <h4 class="title">{{ item.title }}</h4>
          <p class="hint">{{ item.public_abbr }}</p>
        </div>
        <div class="pic" ref="pics">
          <img
            v-if="item.list_image_url"
            :data-src="item.list_image_url"
            alt=""
          />
        </div>
      </div>
    </template>
    <el-skeleton animated :rows="5" v-else />
    <div class="loading" ref="loading" v-show="visible">加载更多数据...</div>
  </div>
</template>

<script>
export default {
  name: 'news-list',
  data() {
    return {
      list: [],
      visible: false
    }
  },
  methods: {
    async query() {
      let result = await this.$api.trending()
      result = result.map((item) => {
        // 数据冻结
        return Object.freeze(item.object.data)
        // return item.object.data;
      })
      this.list.push(...result)
      this.visible = true
      console.log(this.list)
      // 获取PIC并且进行监听
      this.$nextTick(() => {
        this.$refs.pics.forEach((item) => {
          // console.log(this.ob.observe);
          // 监听每一个img
          this.ob.observe(item)
        })
      })
    }
  },
  created() {
    this.query()
  },
  mounted() {
    this.ob = new IntersectionObserver(
      (changes) => {
        // console.log(changes);//这里是所有的已被监听的数据
        changes.forEach(({ isIntersecting, target }) => {
          if (!isIntersecting) return
          // 出现在视口中：加载真实图片
          console.log(target)
          const img = target.querySelector('img')
          if (!img) return
          img.src = img.getAttribute('data-src')
          img.onload = () => (img.style.opacity = 1)
          this.ob.unobserve(target)
        })
      },
      // 等目标在视口时才触发监听 默认是当目标顶部到视口底部
      { threshold: [1] }
    )

    // 滚动到底部加载更多数据
    this.obLoading = new IntersectionObserver(([item]) => {
      if (item.isIntersecting) {
        // 滚动到底部了
        this.query()
      }
    })
    this.obLoading.observe(this.$refs.loading)
  }
}

/*
[
    {
        "id": 98097543,
        "title": "两位文坛巨匠的恩怨",
        "slug": "04cef18e0c74",
        "list_image_url": "",
        "public_abbr": "1936年，郭沫若结了三次婚，抛弃了两个妻子、五个子女，鲁迅写了一篇文章讽刺，郭沫若写了“衣冠禽兽”四个字回敬，鲁...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 8466509,
            "nickname": "仲维宇",
            "slug": "12dae47f2300",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/8466509/dbf83a24-d2aa-4190-a198-5aa26f6462bd.jpg"
        },
        "total_fp_amount": 21933,
        "public_comments_count": 38,
        "total_rewards_count": 52,
        "likes_count": 166
    },
    {
        "id": 97598260,
        "title": "心态崩了",
        "slug": "b0bddadf3daa",
        "list_image_url": "",
        "public_abbr": "养娃两年多，第一次彻底崩溃。 昨天下夜班，买菜，收拾收拾屋子，然后回来和儿子玩了一会儿，就到午饭时间了，我又开始做...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 21989768,
            "nickname": "感冒的梵高",
            "slug": "a28fed5312a8",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/21989768/f57b0d32-5d36-4205-a98d-dd070ee83c56.jpg"
        },
        "total_fp_amount": 60024,
        "public_comments_count": 58,
        "total_rewards_count": 1,
        "likes_count": 205
    },
    {
        "id": 100119174,
        "title": "《此生未完成》：用生命写的书",
        "slug": "af1d0a4037da",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/2178738-2c9c3420777a37c4.jpg",
        "public_abbr": "2022年4月3日  星期天  晴 今天大晴天，我家先生和几个钓友跑到几十公里外的乡下去钓鱼了，而我因为要在这个假...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2178738,
            "nickname": "精进的医生",
            "slug": "61d710a4a0ce",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2178738/ff489ca2-7a83-49e4-8ee0-b49a8bf3e491.jpg"
        },
        "total_fp_amount": 118241,
        "public_comments_count": 27,
        "total_rewards_count": 0,
        "likes_count": 77
    },
    {
        "id": 98129745,
        "title": "快要结婚了，可是我却哭了",
        "slug": "971e5c1973da",
        "list_image_url": "",
        "public_abbr": "  我和男友结婚日子定了，因为我在湖北，他在深圳，所以我这边5月1号嫁，他那边5月20号娶。   我是湖北农村的，...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 15682939,
            "nickname": "一个有才情的女子",
            "slug": "3f91166ba84a",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/15682939/03f3e062-ba29-4c49-89a3-bb8e97e7bb32.jpg"
        },
        "total_fp_amount": 112684,
        "public_comments_count": 454,
        "total_rewards_count": 48,
        "likes_count": 749
    },
    {
        "id": 97808239,
        "title": "缺爱的人，一下子就能看出来",
        "slug": "1d097f46c54f",
        "list_image_url": "",
        "public_abbr": "世界上的人，每一个，都总是很不一样。 会有着不同的长相，不同的过往，也会有着不同的性格，以及不同的认知。 就像有的...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2100084,
            "nickname": "南方姑娘谭檬",
            "slug": "e8a904c5a7a1",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2100084/e89449f9-fc51-4a68-9a56-107cc373f0db.jpg"
        },
        "total_fp_amount": 93691,
        "public_comments_count": 182,
        "total_rewards_count": 3,
        "likes_count": 1445
    },
    {
        "id": 97961469,
        "title": "微信红包",
        "slug": "004ae79ab62b",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/22094067-7839ad6b216be408.jpg",
        "public_abbr": "今年收的最大的红包就是那个人转来的9999.00元。 这是我跟了他十八年来最大的红包，在此之前的节日礼物是五百。 ...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 22094067,
            "nickname": "春天里的阿玲",
            "slug": "33f24a2d40af",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/22094067/6aca30d8-14c8-4114-891e-b740fc40237b.jpg"
        },
        "total_fp_amount": 64051,
        "public_comments_count": 92,
        "total_rewards_count": 0,
        "likes_count": 443
    },
    {
        "id": 97673893,
        "title": "煎熬",
        "slug": "22adf17c553a",
        "list_image_url": "",
        "public_abbr": "    今早，终于有些压抑不住自己的情绪，在母亲面前歇斯底里的痛哭了一场。原因竟是那让人有些难以启齿的问题，生完孩...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 7181011,
            "nickname": "慢慢鱼",
            "slug": "19000ab74c24",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/7181011/7007a679-0c6f-4547-a41e-9ff5845b29be.jpg"
        },
        "total_fp_amount": 62210,
        "public_comments_count": 159,
        "total_rewards_count": 1,
        "likes_count": 465
    },
    {
        "id": 96791191,
        "title": "一句话让我损失五十万",
        "slug": "9bca8bb82d35",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/14367397-159cf64557bfae5f.jpg",
        "public_abbr": "昨天小年，我们本来打算在自己家过的，可是，亲家母还是邀请我们去女儿家过。 正好，我们好几天没看到外孙了，也是挺想他...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 14367397,
            "nickname": "雨萌2018",
            "slug": "742fe9bf3ce6",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/14367397/319cbe75-c11f-4a3c-9c86-8580c07b8697.jpg"
        },
        "total_fp_amount": 74703,
        "public_comments_count": 117,
        "total_rewards_count": 0,
        "likes_count": 500
    },
    {
        "id": 97463662,
        "title": "嫁人慎嫁才子",
        "slug": "aeac6f0ab514",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/12996091-3dc539aa1128cb05.JPG",
        "public_abbr": "             01 在网上无意中看到一个民国渣～男排行榜: 1.郭沫若2.胡兰成3.徐志摩4.黄侃5....",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 12996091,
            "nickname": "子鱼讲故事",
            "slug": "fe66b9a6285b",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/12996091/85855be6-e530-454d-bc6e-66d73cc6093e.jpg"
        },
        "total_fp_amount": 5254,
        "public_comments_count": 21,
        "total_rewards_count": 0,
        "likes_count": 25
    },
    {
        "id": 99052867,
        "title": "朋友的苦恼",
        "slug": "f8eb011c7cd7",
        "list_image_url": "",
        "public_abbr": "一个女性朋友，30多岁，却苦恼于和丈夫没有夫妻生活。她问我：“这种情况是不是需要治疗？” 我问她：“他生理上没问题...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 8981154,
            "nickname": "牛牛平常",
            "slug": "df8e37eab204",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/8981154/c925a4f5-9645-49ae-9530-12e8f80b15d4.jpg"
        },
        "total_fp_amount": 58154,
        "public_comments_count": 75,
        "total_rewards_count": 30,
        "likes_count": 439
    },
    {
        "id": 97779843,
        "title": "结婚后，我成了蹭饭人",
        "slug": "dd5f3ec6f581",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/2484762-66d9eb8ca6951aef.jpg",
        "public_abbr": "先生回家已经有两天了，可是家里都还没开过火。基本上是婆家蹭一顿，娘家蹭一顿。就连早餐也是从婆家娘家带回来的，稍微加...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2484762,
            "nickname": "向行",
            "slug": "0c2891c8319e",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2484762/36885f736102.jpeg"
        },
        "total_fp_amount": 95626,
        "public_comments_count": 101,
        "total_rewards_count": 49,
        "likes_count": 375
    },
    {
        "id": 98747851,
        "title": "8个月写了80万字的我，得到了什么？",
        "slug": "91102d9a6365",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/4773910-80c93959b4c7bef7.jpg",
        "public_abbr": "时隔半年，和前同事们吃饭。饭后，我们走在春夜里，人潮热闹，晚风微凉。一个同事说，“你的文是写得最好的。我们在阅读你...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 4773910,
            "nickname": "静若517",
            "slug": "0f63d758cf5a",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/4773910/90c7a4af-f54b-4822-bd43-c0513e67031d.jpg"
        },
        "total_fp_amount": 45268,
        "public_comments_count": 102,
        "total_rewards_count": 2,
        "likes_count": 376
    },
    {
        "id": 101499925,
        "title": "生活优越的人，怎么会跳楼自杀？",
        "slug": "f91c6509326d",
        "list_image_url": "",
        "public_abbr": "单位同事跳楼自杀了，大家听到这个消息无比震惊。怎么可能呢? 同事家境好，妻子做生意，漂亮的女儿大学毕业后嫁入豪门，...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 14806630,
            "nickname": "若涵_a",
            "slug": "b47b62bd8852",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/14806630/f9c8d4c3-52cc-4bcb-bc9e-6202fe30be4b.jpg"
        },
        "total_fp_amount": 3140,
        "public_comments_count": 31,
        "total_rewards_count": 0,
        "likes_count": 37
    },
    {
        "id": 99392572,
        "title": "林徽因的魅力，远不止美貌与学识",
        "slug": "7aced91e667e",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/21873126-8758d41fe33b1eb8.jpg",
        "public_abbr": "文/沐恩佳音 我曾经零零星星地看过或者听过林徽因的故事，从别人对她的解读和评价中，我知道被人称为民国女神的林徽因有...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 21873126,
            "nickname": "沐恩佳音",
            "slug": "8d137796772d",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/21873126/0396669c-6b33-400b-ac4c-fbe48c7ae2af.jpg"
        },
        "total_fp_amount": 112381,
        "public_comments_count": 70,
        "total_rewards_count": 6,
        "likes_count": 352
    },
    {
        "id": 98601749,
        "title": "母亲走了",
        "slug": "ac178aebb762",
        "list_image_url": "",
        "public_abbr": "2月16日早晨，还和母亲通了电话，告诉她：“购买的血糖仪今天能收到，记得测量血糖。”却不想在中午时分，接到爱人急促...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 8539214,
            "nickname": "沈思扬",
            "slug": "34ce30e83668",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/8539214/8dd82f56-6d22-415c-8252-bba575f00378.jpg"
        },
        "total_fp_amount": 122893,
        "public_comments_count": 185,
        "total_rewards_count": 3,
        "likes_count": 340
    },
    {
        "id": 98742755,
        "title": "女儿做的饭",
        "slug": "b20f855ed2fc",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/15161859-a1ecfb78e54794b6.jpg",
        "public_abbr": "快过年的时候，女儿还没有买上炒菜锅，我们家正月初三招待亲戚，我炖了好多肉，棒骨肉，大肘子肉，想着女儿也吃不上，心里...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 15161859,
            "nickname": "如此美好的一天jiayou",
            "slug": "80e09f539587",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/15161859/f882498a-c146-41ef-85ed-b7f2f9b1fda4.jpg"
        },
        "total_fp_amount": 57879,
        "public_comments_count": 54,
        "total_rewards_count": 0,
        "likes_count": 221
    },
    {
        "id": 100431578,
        "title": "37岁女博士带着5个月女儿从27楼跳下去",
        "slug": "c346ded14236",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/16410256-38b99266eeaaa1ba.jpg",
        "public_abbr": "长沙某小区内，37岁女博士苏女士，带着5个月女儿，从27楼跳下……当场身亡。 据亲友介绍，苏女士和丈夫李强，都是博...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 16410256,
            "nickname": "红尘禅语",
            "slug": "33f3c51206c2",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/16410256/90786a29-6509-4a4e-9300-372a6fe2844b.jpg"
        },
        "total_fp_amount": 30352,
        "public_comments_count": 105,
        "total_rewards_count": 0,
        "likes_count": 255
    },
    {
        "id": 97754428,
        "title": "贵人",
        "slug": "0b0144d9bec4",
        "list_image_url": "",
        "public_abbr": "我有个认识二十多年的朋友，不经常联系，偶尔打个电话，不影响感情。 她每年都会送些东西给我，而我给她点东西的时候，她...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 17265435,
            "nickname": "小燕五",
            "slug": "942a293b417a",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/17265435/5cf38ccf-4f8d-460e-861a-9bba3497c49f.jpg"
        },
        "total_fp_amount": 55614,
        "public_comments_count": 73,
        "total_rewards_count": 0,
        "likes_count": 300
    },
    {
        "id": 97479686,
        "title": "经典阅读《月亮与六便士》：人生茫茫，有人俯身捡拾六便士，有人抬头仰望天空的月亮",
        "slug": "c41bf5060650",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/7337605-b6885d3fcfc424c7.jpg",
        "public_abbr": "感觉阅读又回到了年轻的时候，被一本书紧紧的牵着，一步步走下去。利用四天的空余时间，读完了毛姆的《月亮与六便士》。 ...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 7337605,
            "nickname": "一朵雪",
            "slug": "9973d82d214c",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/7337605/93b5eb1f-7f7e-490d-b62a-238538f54171.jpg"
        },
        "total_fp_amount": 7197,
        "public_comments_count": 6,
        "total_rewards_count": 13,
        "likes_count": 35
    },
    {
        "id": 97461243,
        "title": "《平凡的世界》——孙少平",
        "slug": "a49764063e15",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/2490511-9c2a684b668e68cc.jpg",
        "public_abbr": "《平凡的世界》是一部经典之作，也是路遥耗尽心血完成的巨著，作品问世后，他见证了这本书的辉煌，而后油尽灯枯，英年早逝...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2490511,
            "nickname": "刹那流转",
            "slug": "85302507d508",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2490511/9e1bbca2-0e9b-487e-afc1-23d212578852.jpg"
        },
        "total_fp_amount": 63957,
        "public_comments_count": 4,
        "total_rewards_count": 26,
        "likes_count": 83
    },
    {
        "id": 100345008,
        "title": "湘容儿成长日记第1158天【一年级小女孩自由在外面玩耍】",
        "slug": "262914404b6e",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/19850305-5076cf8fb1177af2.jpg",
        "public_abbr": "2022年4月8日 亲子共读地點：餐桌、床上 亲子共读时间：早上、中午、晚上 亲子共读时长： 亲子共读内容：古诗、...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 19850305,
            "nickname": "湘容儿",
            "slug": "041c3a3807d4",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/19850305/96c771c5-6b0d-4b55-8821-eb3ba605b5af.jpg"
        },
        "total_fp_amount": 3284,
        "public_comments_count": 0,
        "total_rewards_count": 9,
        "likes_count": 18
    },
    {
        "id": 100639342,
        "title": "终见栀子花",
        "slug": "f4e769438892",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/20249268-547431cb98c2c1c8.jpg",
        "public_abbr": "走火入魔了，路过花摊时，看见一盆花苞累累、已经有几朵在开的栀子花，就又把它买回来了。再顺手买了花盆、花肥、花土、喷...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 20249268,
            "nickname": "庭外白云",
            "slug": "a11d8e821e82",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/20249268/08d3e1c5-6675-4faf-83b7-d487454ad33d.jpg"
        },
        "total_fp_amount": 12892,
        "public_comments_count": 8,
        "total_rewards_count": 0,
        "likes_count": 58
    },
    {
        "id": 99673659,
        "title": "坚持的力量",
        "slug": "6fdf05b07728",
        "list_image_url": "",
        "public_abbr": "今天这一天我过得很痛苦。 这两天脚就有点疼。昨天回家脱掉鞋看看，发现左脚小拇指紧贴着它的“邻居”，掰开看一看，原来...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 15562217,
            "nickname": "阳光总在风雨后_74ff",
            "slug": "285f2135626e",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/15562217/b8610efd-6619-44a0-9811-c73921de3a6c"
        },
        "total_fp_amount": 2810,
        "public_comments_count": 7,
        "total_rewards_count": 13,
        "likes_count": 8
    },
    {
        "id": 97673893,
        "title": "煎熬",
        "slug": "22adf17c553a",
        "list_image_url": "",
        "public_abbr": "    今早，终于有些压抑不住自己的情绪，在母亲面前歇斯底里的痛哭了一场。原因竟是那让人有些难以启齿的问题，生完孩...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 7181011,
            "nickname": "慢慢鱼",
            "slug": "19000ab74c24",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/7181011/7007a679-0c6f-4547-a41e-9ff5845b29be.jpg"
        },
        "total_fp_amount": 62210,
        "public_comments_count": 159,
        "total_rewards_count": 1,
        "likes_count": 465
    },
    {
        "id": 100108085,
        "title": "很不好",
        "slug": "2cc4c8b09188",
        "list_image_url": "",
        "public_abbr": "两县都有确诊人员，一个高达五例之多，都是外地回来后查出的。 相邻市的几个县也有查出，也多为回归人员。处理得很重，县...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 24484179,
            "nickname": "云翔蓝天",
            "slug": "45537c46776e",
            "avatar": "https://cdn2.jianshu.io/assets/default_avatar/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg"
        },
        "total_fp_amount": 10759,
        "public_comments_count": 8,
        "total_rewards_count": 0,
        "likes_count": 58
    },
    {
        "id": 98280021,
        "title": "我的2022年",
        "slug": "13b2de65b0fd",
        "list_image_url": "",
        "public_abbr": "2022年，到底是怎么样的一年呢，我目前的生活，已经有了新的变化，宝爸马上要去工厂那边上班了，他说已经签好了合同，...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 20122482,
            "nickname": "小灵芝阿尘",
            "slug": "e0b3aef53b72",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/20122482/3b8e0db1-9e5f-42b8-afbf-3abab93a305c"
        },
        "total_fp_amount": 39777,
        "public_comments_count": 29,
        "total_rewards_count": 0,
        "likes_count": 177
    },
    {
        "id": 97808239,
        "title": "缺爱的人，一下子就能看出来",
        "slug": "1d097f46c54f",
        "list_image_url": "",
        "public_abbr": "世界上的人，每一个，都总是很不一样。 会有着不同的长相，不同的过往，也会有着不同的性格，以及不同的认知。 就像有的...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2100084,
            "nickname": "南方姑娘谭檬",
            "slug": "e8a904c5a7a1",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2100084/e89449f9-fc51-4a68-9a56-107cc373f0db.jpg"
        },
        "total_fp_amount": 93691,
        "public_comments_count": 182,
        "total_rewards_count": 3,
        "likes_count": 1445
    },
    {
        "id": 99070004,
        "title": "目标",
        "slug": "90270c20656d",
        "list_image_url": "",
        "public_abbr": "很久没有打开头条了。 简书也是，只能说很久没有写了，忽然发现头条还有900多没有提现。 头条写了有大半年了，累计只...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 17362917,
            "nickname": "天蓝色蜗牛",
            "slug": "d70528623db5",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/17362917/4197f6d1-cf3e-47af-b218-16261eb3ac8a.jpg"
        },
        "total_fp_amount": 26442,
        "public_comments_count": 27,
        "total_rewards_count": 0,
        "likes_count": 141
    },
    {
        "id": 100608733,
        "title": "今日份碎碎念",
        "slug": "747d86dcd2f2",
        "list_image_url": "",
        "public_abbr": "今天过得不太完美啊，都没怎么学习，晚上打游戏但是赢了两把。 上午上课的时候教员老师跟有病班主任说我学的好，让她早点...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 21415753,
            "nickname": "光阴有侍",
            "slug": "2fc2d45178ff",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/21415753/09c46a3d-58e8-4d6d-828b-0af11e8b9758"
        },
        "total_fp_amount": 6990,
        "public_comments_count": 1,
        "total_rewards_count": 0,
        "likes_count": 19
    },
    {
        "id": 97449839,
        "title": "订单系统：看似简单的“订单售后”，背后竟隐藏这么多的设计细节",
        "slug": "910091d91fbb",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/1830120-b4ac28f4c7b1c0ab.png",
        "public_abbr": "编辑导语：前两篇与大家分享了商品下单、订单管理的功能设计。本篇主要和大家聊一聊有关订单的逆向流程即订单售后的相关功...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 1830120,
            "nickname": "Axure原型设计",
            "slug": "8e5e73782c6f",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/1830120/89b742be-3ebe-4dad-8b4f-7ba8fff285eb.png"
        },
        "total_fp_amount": 4581,
        "public_comments_count": 1,
        "total_rewards_count": 0,
        "likes_count": 28
    },
    {
        "id": 99052867,
        "title": "朋友的苦恼",
        "slug": "f8eb011c7cd7",
        "list_image_url": "",
        "public_abbr": "一个女性朋友，30多岁，却苦恼于和丈夫没有夫妻生活。她问我：“这种情况是不是需要治疗？” 我问她：“他生理上没问题...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 8981154,
            "nickname": "牛牛平常",
            "slug": "df8e37eab204",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/8981154/c925a4f5-9645-49ae-9530-12e8f80b15d4.jpg"
        },
        "total_fp_amount": 58154,
        "public_comments_count": 75,
        "total_rewards_count": 30,
        "likes_count": 439
    },
    {
        "id": 100431578,
        "title": "37岁女博士带着5个月女儿从27楼跳下去",
        "slug": "c346ded14236",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/16410256-38b99266eeaaa1ba.jpg",
        "public_abbr": "长沙某小区内，37岁女博士苏女士，带着5个月女儿，从27楼跳下……当场身亡。 据亲友介绍，苏女士和丈夫李强，都是博...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 16410256,
            "nickname": "红尘禅语",
            "slug": "33f3c51206c2",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/16410256/90786a29-6509-4a4e-9300-372a6fe2844b.jpg"
        },
        "total_fp_amount": 30352,
        "public_comments_count": 105,
        "total_rewards_count": 0,
        "likes_count": 255
    },
    {
        "id": 100119174,
        "title": "《此生未完成》：用生命写的书",
        "slug": "af1d0a4037da",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/2178738-2c9c3420777a37c4.jpg",
        "public_abbr": "2022年4月3日  星期天  晴 今天大晴天，我家先生和几个钓友跑到几十公里外的乡下去钓鱼了，而我因为要在这个假...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2178738,
            "nickname": "精进的医生",
            "slug": "61d710a4a0ce",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2178738/ff489ca2-7a83-49e4-8ee0-b49a8bf3e491.jpg"
        },
        "total_fp_amount": 118241,
        "public_comments_count": 27,
        "total_rewards_count": 0,
        "likes_count": 77
    },
    {
        "id": 97631176,
        "title": "估计自己也能长寿",
        "slug": "e37fe21b8411",
        "list_image_url": "",
        "public_abbr": "我感觉自己将来肯定能长寿，虽然平时小毛病不断，但经过我仔细分析研究，活它个八十岁应该没多大问题。 原因有五点： 第...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 18139336,
            "nickname": "林妮linni",
            "slug": "dd252650de30",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/18139336/7d24df16-6e1d-444a-ae54-57677e106e50.jpg"
        },
        "total_fp_amount": 63962,
        "public_comments_count": 62,
        "total_rewards_count": 0,
        "likes_count": 261
    },
    {
        "id": 101499925,
        "title": "生活优越的人，怎么会跳楼自杀？",
        "slug": "f91c6509326d",
        "list_image_url": "",
        "public_abbr": "单位同事跳楼自杀了，大家听到这个消息无比震惊。怎么可能呢? 同事家境好，妻子做生意，漂亮的女儿大学毕业后嫁入豪门，...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 14806630,
            "nickname": "若涵_a",
            "slug": "b47b62bd8852",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/14806630/f9c8d4c3-52cc-4bcb-bc9e-6202fe30be4b.jpg"
        },
        "total_fp_amount": 3140,
        "public_comments_count": 31,
        "total_rewards_count": 0,
        "likes_count": 37
    },
    {
        "id": 98883611,
        "title": "冰火两重天",
        "slug": "b42b229940c9",
        "list_image_url": "",
        "public_abbr": "草长莺飞三月天，又是一年好季节。 这几天温度持续升高，在寒冬里低迷了几个月的天气，突然就温暖起来，有种迎来春天的感...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 2279211,
            "nickname": "一只爱哭的猫",
            "slug": "6aa5ba26bc6d",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/2279211/b6f9b511f6d0.jpg"
        },
        "total_fp_amount": 3470,
        "public_comments_count": 1,
        "total_rewards_count": 0,
        "likes_count": 22
    },
    {
        "id": 99137347,
        "title": "活成自己的“女神”",
        "slug": "52d135fa0710",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/21421870-d87576c82d094ecb.jpg",
        "public_abbr": "一个女人成熟的标志就是： 人不作、话不多、事不拖， 与自己无关的事情， 不问、不想、也不说。 能做风雨里单手打方向...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 21421870,
            "nickname": "叶雪白",
            "slug": "608291f36af1",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/21421870/0631968f-0538-4488-8815-028cf88ee051.jpg"
        },
        "total_fp_amount": 11400,
        "public_comments_count": 6,
        "total_rewards_count": 8,
        "likes_count": 57
    },
    {
        "id": 98747851,
        "title": "8个月写了80万字的我，得到了什么？",
        "slug": "91102d9a6365",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/4773910-80c93959b4c7bef7.jpg",
        "public_abbr": "时隔半年，和前同事们吃饭。饭后，我们走在春夜里，人潮热闹，晚风微凉。一个同事说，“你的文是写得最好的。我们在阅读你...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 4773910,
            "nickname": "静若517",
            "slug": "0f63d758cf5a",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/4773910/90c7a4af-f54b-4822-bd43-c0513e67031d.jpg"
        },
        "total_fp_amount": 45268,
        "public_comments_count": 102,
        "total_rewards_count": 2,
        "likes_count": 376
    },
    {
        "id": 98875724,
        "title": "阳春三月",
        "slug": "8694470c24cb",
        "list_image_url": "",
        "public_abbr": "三月伊始，虽然不见明媚阳光，但气候宜人，春风醉人、花儿迷人，而且再也不用穿羽绒服了。 话说昨天我把去年刚买的羽绒服...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 6027715,
            "nickname": "听书自傲",
            "slug": "734dddd9f2a1",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/6027715/a27ed943-279e-470c-8f5a-2540d6611146.jpg"
        },
        "total_fp_amount": 6158,
        "public_comments_count": 1,
        "total_rewards_count": 16,
        "likes_count": 32
    },
    {
        "id": 98144166,
        "title": "世界是有心人的",
        "slug": "b295bec5f55c",
        "list_image_url": "https://upload-images.jianshu.io/upload_images/21393702-491a02d544269933.jpeg",
        "public_abbr": "有人说过这样一段话，深以为然。“这个世界不是有钱人的世界，也不是无钱人的世界，它是有心人的世界。” 如此这样以为，...",
        "commentable": true,
        "important_collection": null,
        "user": {
            "id": 21393702,
            "nickname": "夜空一星",
            "slug": "6fbbf95cc90c",
            "avatar": "https://upload.jianshu.io/users/upload_avatars/21393702/36e6fa27-e80c-42a6-9b8f-694e631589af.jpg"
        },
        "total_fp_amount": 9071,
        "public_comments_count": 5,
        "total_rewards_count": 1,
        "likes_count": 66
    }
]

*/
</script>

<style lang="less" scoped>
.news-list {
  .item {
    position: relative;
    padding: 10px 0;
    min-height: 120px;
    border-bottom: 1px dashed #eee;

    .con {
      margin-right: 170px;

      .title {
        line-height: 30px;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .hint {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .pic {
      position: absolute;
      top: 10px;
      right: 10px;
      box-sizing: border-box;
      width: 150px;
      height: 120px;
      overflow: hidden;
      background: url('../assets/defaultbg.webp') no-repeat;
      background-size: 100% 100%;

      img {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s;
      }
    }
  }

  .loading {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>
